<template>
  <view class="container">
    <view
      :style="{
        height: useSafeArea.getSafeAreaTop + 'rpx',
        background: '#4caf50'
      }"
    ></view>

    <view class="curve-box">
      <view class="header-title">欢迎使用</view>
      <view class="content-area">
        <view class="sub-text-container">
          <view class="stat-item">
            <text class="stat-label">今日订单</text>
            <text class="stat-value">{{ detail?.today || 0 }}</text>
          </view>
          <view class="divider"></view>
          <view class="stat-item">
            <text class="stat-label">累计订单</text>
            <text class="stat-value">{{ detail?.total || 0 }}</text>
          </view>
        </view>
      </view>
    </view>
    <!-- 新增内容：使用自定义标题组件 -->
    <view>
      <view v-for="(item, title, index) in menuData" :key="index">
        <wd-gap bg-color="#f0f0f0" v-if="index !== 0" />
        <view class="custom-title-section">
          <CustomTitle :title="title" :showMore="item[0].showMore" />
          <view class="icon-container">
            <view v-for="(subItem, subIndex) in item" :key="subIndex">
              <view class="icon-item" @click="subItem.handleClick">
                <wd-icon
                  :name="subItem.icon"
                  size="24px"
                  color="#4caf50"
                ></wd-icon>
                <text class="icon-text">{{ subItem.label }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { onShow } from '@dcloudio/uni-app'
// 导入自定义标题组件
import CustomTitle from './components/CustomTitle.vue'
import { groupBy } from '@/utils/others'
import { indexMenu, adminMenu, masterMenu } from './cache'
import { userOrderStats } from '@/api/order'
import useStore from '@/store'

const { useSafeArea } = useStore()

const ruleMenu = ref<string>(uni.getStorageSync('rule') || 'user')

const menuData = computed(() => {
  return groupBy(
    ruleMenu.value === 'admin'
      ? adminMenu
      : ruleMenu.value === 'master'
        ? masterMenu
        : indexMenu,
    (item) => item?.cell ?? ''
  )
})

const detail = ref<any>()

const userDetail = async () => {
  const res = await userOrderStats({
    user_id: uni.getStorageSync('user').id
  })
  detail.value = res.data
}

const masterDetail = async () => {
  const res = await userOrderStats({
    master_id: uni.getStorageSync('user').id
  })
  detail.value = res.data
}

const adminDetail = async () => {
  const res = await userOrderStats({})
  detail.value = res.data
}

onShow(async () => {
  ruleMenu.value = uni.getStorageSync('rule')
  if (ruleMenu.value === 'user') await userDetail()
  else if (ruleMenu.value === 'master') await masterDetail()
  else await adminDetail()
})
</script>

<style lang="scss" scoped>
.container {
  padding: 0;
}

.curve-box {
  width: 100%;
  background-color: $thme-color;
  padding: 20px 0;
  border-radius: 0 0 60% 60% / 0 0 20% 20%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  min-height: 200px;
}

.header-title {
  font-size: 24px;
  font-weight: bold;
  color: white;
  text-align: center;
}

.content-area {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
}

.sub-text-container {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: rgba(255, 255, 255, 0.3);
  padding: 12px 20px;
  border-radius: 8px;
  width: 80%;
  height: 150rpx;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-label {
  color: #333333;
  font-size: 14px;
  margin-bottom: 4px;
}

.stat-value {
  color: #333333;
  font-size: 20px;
  font-weight: bold;
}

.divider {
  width: 1px;
  height: 30px;
  background-color: #cccccc;
}

.custom-title-section {
  padding: 20rpx;
  margin-top: 20rpx;
}

.icon-container {
  display: flex;
  justify-content: flex-start;
  padding: 20rpx 0;
}

.icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 150rpx;
}

.icon-text {
  margin-top: 10rpx;
  font-size: 28rpx;
  color: #333;
}

.badge {
  position: absolute;
  top: -10rpx;
  right: 30rpx;
}
</style>
